<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="注册赠送积分" prop="register">
            <el-input-number v-model="form.register" :min="0" label="请输入积分数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="每日签到积分" prop="signIn">
            <el-input-number v-model="form.signIn" :min="0" label="请输入每日签到积分"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="消费1元赠送积分" prop="consumer">
            <el-input-number v-model="form.consumer" :min="0" label="请输入消费1元赠送积分"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单评价赠送积分" prop="comment">
            <el-input-number v-model="form.comment" :min="0" label="请输入订单评价赠送积分"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>





      <el-row :gutter="30" v-for="(item, index) in form.pointSettingItems" :key="item.key">
        <el-col :span="12" >
          <el-form-item label="签到天数" prop="consumer">
            <el-input-number v-model="item.day" :min="0" label="请输入签到天数"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="赠送积分" prop="consumer">
            <el-input-number v-model="item.point" :min="0" label="请输入赠送积分"></el-input-number>

            <el-button
              style="margin-left: 10px"
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              v-show="form.pointSettingItems.length > 1"
              @click="removeDomain(item, index)"
            >删除</el-button>

            <el-button @click="addJWItem" type="primary" icon="el-icon-add" v-show="index == form.pointSettingItems.length -1 && form.pointSettingItems.length < 4"
            >新增</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>注意</span>
      </div>
      <p>1、积分设置不允许出现负数</p>
      <p>2、请确保设置正确，以免业务逻辑出错</p>
    </el-card>
  </div>
</template>

<script>
import { getSettingByKey, updateSetting } from '@/api/sysSet/setting'
import form from "@/views/sysSet/flowable/form/index.vue";

export default {
  name: 'POINT_SETTING',
  dicts: ['sys_yes_no'],
  data() {
    return {
      configName: '积分配置',
      configKey: 'point_config',
      // 表单参数
      form: {
        register: 0,
        signIn: 0,
        consumer: 0,
        comment: 0,
        pointSettingItems: [
          {day: 0,point: 0}
        ]
      },
      settingForm: {
        configName: '积分配置',
        configKey: 'point_config',
        configType: 'N',
        configValue: ''
      },
      // 表单校验
      rules: {
        min: [
          {required: true, message: "密码不能为空", trigger: "change"}
        ],
        fee: [
          {min: 0,max:999,message:"提现手续费介于0 到 999 之间",trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    /** 查询参数配置列表 */
    getConfig() {
      getSettingByKey(this.configKey).then(response => {
        this.settingForm = response.data
        let configValue = response.data.configValue
        console.log(configValue)
        if (!configValue) {
          this.reset()
        } else {
          this.form = JSON.parse(configValue)
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        register: 0,
        signIn: 0,
        consumer: 0,
        comment: 0,
        pointSettingItems: [
          {day: 0,point: 0}
        ]
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(JSON.stringify(this.form))
          this.settingForm.configValue = JSON.stringify(this.form)
          updateSetting(this.settingForm).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.getConfig()
          })
        }
      })
    },
    // 新增经纬度表单项
    addJWItem() {
      this.form.pointSettingItems.push({
        day: '',
        point: '',
      })
    },
    // 点击删除经纬度项
    removeDomain(item, index) {
      const itemList = this.form.pointSettingItems.indexOf(item)
      if (itemList !== -1) {
        this.form.pointSettingItems.splice(index, 1)
      }
    },
  }
}
</script>

<style>
.box-card{
  margin-top: 20px;
}
</style>
